<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>
    <!-- 内容区域 -->
    <!-- 地址 -->
    <view class="address">
      <view>
        <uni-icons type="location" size="30"></uni-icons>
      </view>
      <view class="userinfo">
        <view class="name">
          <text>张三</text>
          <text style="padding-left: 28rpx">1888888888</text>
        </view>
        <view class="place">河南省郑州市金水区金水路208号29888号</view>
      </view>
      <view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 商品信息 -->
    <view class="goodsinfo">
      <image src="/sub_goodstype/static/goodsimg.png" mode="" style="width: 150rpx; height: 150rpx; border-radius: 20rpx 20rpx 20rpx 20rpx; margin-right: 16rpx"></image>
      <view>
        <view class="title">直屏影像旗舰新款智能手机新款智能手...</view>
        <view class="guige">纯铜; 6mm</view>
        <view class="price">
          <text style="font-size: 22rpx; color: red">￥</text>
          <text style="font-size: 32rpx; color: red">7688.00</text>
          <text style="font-size: 26rpx; padding-left: 300rpx">X3</text>
        </view>
      </view>
    </view>
    <!-- 订单备注 -->
    <view class="ordertiptitle">订单备注</view>
    <view class="ordertip">
      <textarea
        placeholder="选填，请先与商家协商一致"
        cols="30"
        rows="10"
        style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #666666"
      ></textarea>
    </view>
    <!-- 总金额 -->
    <view class="totalprice">
      <text style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 36rpx">总金额 :</text>
      <text style="font-size: 22rpx; color: red">￥</text>
      <text style="font-size: 32rpx; color: red">7688.00</text>
      <view class="pay" @click="$refs.payRef.open()">立即支付</view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
    <!-- 支付弹框（余额充足） -->
    <uni-popup ref="payRef" type="center">
      <view class="okpay">
        <view style="height: 190rpx; text-align: center; line-height: 190rpx">
          <!-- 余额充足 -->
          <view v-if="true">
            <text style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">确认支付</text>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">7688.00</text>
          </view>
          <!-- 余额不足 -->
          <view v-else>
            <text style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">当前余额不足</text>
          </view>
        </view>
        <view style="display: flex">
          <view class="okbtn" @click="$refs.payRef.close()">取消</view>
          <view class="okbtn" @click="confirmpay">确认</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
export default {
  components: {
    headerCom,
    footerCom
  },
  data() {
    return {};
  },
  methods: {
    // 点击确认支付
    confirmpay() {}
  }
};
</script>

<style lang="less" scoped>
.container {
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .address {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 702rpx;
    height: 172rpx;
    background: #ffffff;
    margin: 20rpx 24rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .userinfo {
      .name {
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #222222;
      }
      .place {
        font-size: 28rpx;
        margin-top: 16rpx;
      }
    }
  }
  .goodsinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 204rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 28rpx 24rpx;
    .title {
      width: 500rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
      font-size: 28rpx;
    }
    .guige {
      font-size: 26rpx;
      color: #666666;
      margin-top: 12rpx;
      margin-bottom: 28rpx;
    }
  }
  .ordertiptitle {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #222222;
    margin: 40rpx 0 12rpx 44rpx;
  }
  .ordertip {
    box-sizing: border-box;
    padding: 24rpx;
    width: 702rpx;
    height: 258rpx;
    background: #ffffff;

    margin-left: 24rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
  .totalprice {
    display: flex;
    align-items: center;
    margin-top: 158rpx;
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .pay {
      width: 240rpx;
      height: 92rpx;
      text-align: center;
      line-height: 92rpx;
      color: #fff;
      margin-left: 180rpx;
      background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
    }
  }
  .okpay {
    width: 558rpx;
    height: 290rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .okbtn {
      width: 278rpx;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
}
</style>
